<template>
	<div ref="chartDistri" :style="{ height, width }"></div>
</template>
<script lang="ts">
import { defineComponent, PropType, ref, Ref, reactive, watchEffect, onMounted } from 'vue';
import { useECharts } from '/@/hooks/web/useECharts';

import { cloneDeep } from 'lodash-es';
import { t } from '/@/hooks/web/useI18n';
export default defineComponent({
	name: 'bar',
	props: {
		chartData: {
			type: Array,
			default: () => [],
		},
		option: {
			type: Object,
			default: () => ({}),
		},
		width: {
			type: String as PropType<string>,
			default: '100%',
		},
		height: {
			type: String as PropType<string>,
			default: '280px',
		},
		// update-begin--author:liaozhiyang---date:20240407---for：【QQYUN-8762】首页默认及echars颜色调整
		seriesColor: {
			type: String,
			default: '#1890ff',
		},
		// update-end--author:liaozhiyang---date:20240407---for：【QQYUN-8762】首页默认及echars颜色调整
	},
	setup(props) {
		const chartDistri = ref<HTMLDivElement | null>(null);
		const { setOptions, echarts, resize } = useECharts(chartDistri as Ref<HTMLDivElement>);

		onMounted(() => {
			window.addEventListener('resize', function () {
				resize();
			});
		});
		let legend = props.chartData.map((item) => {
			return item.name;
		});
		let seriesData = props.chartData;
		const option = reactive({
			grid: {
				top: '15%',
				left: 60,
				// right: '5%',
				// bottom: 30,
				// containLabel: true,
			},
			tooltip: {
			},
			legend: [
				{
					orient: 'vertical',
					right: 10,
					top: 20,
					z: 999,
					data: ['1', '2', '3'],
				},
			],
			xAxis: {
				name: '时段',
				nameTextStyle: {
					color: '#7d8590',
					fontSize: 12,
					top: 40,
				},
				left: '-40px',
				data: ['业务', '业务', '业务', '业务', '业务、业务', '业务', '业务'],
				axisLabel: {
					textStyle: {
						color: '#7d8590',
						fontSize: 12,
					},
				},
				axisLine: {
					show: true,
				},
				axisTick: {
					show: false,
				},
			},
			yAxis: {
				name: '充电量（万度）',
				left: '-40px',
				// name: "单位:次",
				nameTextStyle: {
					color: '#7d8590',
					fontSize: 12,
				},
				axisLabel: {
					formatter: '{value}',
					textStyle: {
						color: '#7d8590',
						fontSize: 12,
					},
				},
				splitLine: {
					show: false,
					lineStyle: {
						color: '#666',
					},
				},
				axisLine: {
					show: false,
				},
				axisTick: {
					show: false,
				},
			},
			series: [
				{
					type: 'bar',
					// barWidth: 20,
					bargap: "1%",
					itemStyle: {
						normal: {
							borderRadius: 4,//设置柱子圆角
							color: function (params) {
								// build a color map as your need.
								const colorList = [
									'#37e8bd', '#3ca1ff', '#ff9c54', '#C1232B', '#B5C334',
									'#FCCE10', '#E87C25', '#27727B', '#FE8463', '#9BCA63',
									'#FAD860', '#F3A43B', '#60C0DD', '#D7504B', '#C6E579',
									'#F4E001', '#F0805A', '#26C0C0', '#ff6b6b', '#48dbfb',
									'#1dd1a1', '#ff9ff3', '#feca57', '#5f27cd'
								];
								// 根据柱子的索引选择颜色
								const baseColor = colorList[params.dataIndex % colorList.length];
								return new echarts.graphic.LinearGradient(
									0, 0, 0, 1,
									[
										{ offset: 0, color: baseColor }, // 0% 处的颜色
										{ offset: 1, color: '#ffffff' }  // 100% 处的颜色
									],
									false
								);
							},
							// color: function (params) {
							// 	console.log('series-params', params)
							// 	var a = params.name;
							// 	if (a === '00') {
							// 		return new echarts.graphic.LinearGradient(
							// 			0,
							// 			0,
							// 			0,
							// 			1,
							// 			[
							// 				{
							// 					offset: 0,
							// 					color: '#37e8bd', // 0% 处的颜色
							// 				},
							// 				{
							// 					offset: 1,
							// 					color: '#edfdf9', // 100% 处的颜色
							// 				},
							// 			],
							// 			false
							// 		);
							// 	} else if (a === '01' || a === '22') {
							// 		return new echarts.graphic.LinearGradient(
							// 			0,
							// 			0,
							// 			0,
							// 			1,
							// 			[
							// 				{
							// 					offset: 0,
							// 					color: '#3ca1ff', // 0% 处的颜色
							// 				},
							// 				{
							// 					offset: 1,
							// 					color: '#ecf6ff', // 100% 处的颜色
							// 				},
							// 			],
							// 			false
							// 		);
							// 	} else if (a === '03' || a === '21' || a === '21-23') {
							// 		return new echarts.graphic.LinearGradient(
							// 			0,
							// 			0,
							// 			0,
							// 			1,
							// 			[
							// 				{
							// 					offset: 0,
							// 					color: '#ff9c54', // 0% 处的颜色
							// 				},
							// 				{
							// 					offset: 1,
							// 					color: '#fff5ed', // 100% 处的颜色
							// 				},
							// 			],
							// 			false
							// 		);
							// 	}
							// },
						},
					},
					label: {
						normal: {
							show: false,
							fontSize: 12,
							fontWeight: 'normal',
							color: '#000',
							position: 'top',
						},
					},
					data: [254, 3254, 1654, 2454, 4757, 2011, 1211],
				},
			],
		});

		watchEffect(() => {
			console.log(433333333333, props.chartData)
			props.chartData && initCharts();
		});

		function initCharts() {
			if (props.option) {
				Object.assign(option, cloneDeep(props.option));
			}
			let seriesData = props.chartData.map((item) => {
				return item.value;
			});
			let xAxisData = props.chartData.map((item) => {
				return item.name;
			});
			option.series[0].data = seriesData;
			console.log('seriesData', seriesData, 'xAxisData', xAxisData)
			// option.series[1].data = seriesData;
			// update-begin--author:liaozhiyang---date:20240407---for：【QQYUN-8762】首页默认及echars颜色调整
			// option.series[0].color = props.seriesColor;
			// update-end--author:liaozhiyang---date:20240407---for：【QQYUN-8762】首页默认及echars颜色调整
			option.xAxis.data = xAxisData;
			setOptions(option);
		}
		return { chartDistri };
	},
});
</script>
